<template>
    <div class="page">
        <div class="page_left">
            <n-divider />
            <n-anchor :show-rail="false" :show-background="false" ignore-gap @click="handleAnchor">
                <n-anchor-link title="全部" href="JavaScript:;">
                    <n-anchor-link title="html" href="JavaScript:;" />
                    <n-anchor-link title="css" href="JavaScript:;" />
                    <n-anchor-link title="JavaScript" href="JavaScript:;" />
                    <n-anchor-link title="JQuery" href="JavaScript:;" />
                </n-anchor-link>
            </n-anchor>
        </div>
        <div class="page_right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
  import {defineComponent, watch} from 'vue'
  import { useRoute } from 'vue-router'
  import { useStore } from 'vuex'
  import { key } from '../store'
  import css from '../mock/Css.json'
  import all from '../mock/All.json'
  import html from '../mock/Html.json'
  export default defineComponent({
    name: 'Page',
    components: {

    },
    setup() {
      const route = useRoute()
      window.$store =   useStore(key);
      watch(() => route.path,(value) => {
          switch (value) {
            case '/page/all':
              sessionStorage.setItem('CLASS_LIST',JSON.stringify(all))
              window.$store.commit('addCLASS_LIST',all)
              break;
            case '/page/html':
              sessionStorage.setItem('CLASS_LIST',JSON.stringify(html))
              window.$store.commit('addCLASS_LIST',html)
              break;
            case '/page/css':
              sessionStorage.setItem('CLASS_LIST',JSON.stringify(css))
              window.$store.commit('addCLASS_LIST',css)
              break;
            case '/page/js':
              break;
            case '/page/jq':
              break;
            default:
              console.log('无效点击')
        }
        }
      )

    },
    methods: {

      /**
       * 列表点击
       * @param e
       */
      handleAnchor(e) {
        switch (e.target.title) {
          case '全部':
                window.$router.push('/page/all')
            break;
          case 'html':
            window.$router.push('/page/html')
            break;
          case 'css':
            window.$router.push('/page/css')
            break;

          case 'JavaScript':
            window.$router.push('/page/js')
            break;

          case 'JQuery':
            window.$router.push('/page/jq')
            break;
          default:
            console.log('无效点击')
        }
      }
    },
    created() {
      window.$store.commit('addCLASS_LIST',JSON.parse(sessionStorage.getItem('CLASS_LIST')))

    }
  });
</script>

<style  lang="scss" scoped>
    .page {
        width: 1200px;
        margin: 0 auto;
        padding: 0;
        display: flex;
        justify-content: space-between;
        .page_left {
            padding-top: 20px;
            width: 200px;
            height: 800px;
            /*background-color: pink;*/
            border-right: 1px solid #ddd;
        }
        .page_right {
            width: 980px;
            height: 800px;
            /*background-color: pink;*/
        }
    }
</style>
